<template>
	<div class="app-container">
		<div class="wxchatBorderLeft">
			<el-row><div class="waitingArea"></div></el-row>
			<el-row><div>
				<el-col :span="24">
					<video id="video" style="width: 260px;height: 200px;"></video>
					<video id="localVideo" style="width: 260px; height: 200px"></video>
				</el-col></div>
			</el-row>
		</div>
		<div class="wxchatBorderRightTop">
			<el-row class="wxchatRow">
				<el-col :span="4">
					<div class="grid-content wxchatName">{{ currentRow.patient.patientName }}</div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content bg-purple-light">{{ currentRow.patient.sex === 1 ? '女' : '男' }}</div>
				</el-col>
				<el-col :span="8">
					<div class="grid-content bg-purple">{{ currentRow.patient.idCard }}</div>
				</el-col>
				<el-col :span="4">
					<div class="grid-content bg-purple-light">{{ currentRow.patient.phone }}</div>
				</el-col>
			</el-row>
		</div>

		<div class="wxchatBorderRightMid infinite-list-wrapper" id="dialogue_box">
			<div style="margin-left: 30px;margin-top: 15px;">
				<el-row>
					<el-col :span="2">
						<el-avatar :src="patientSquareUrl" style="width: 35px;height: 35px;"></el-avatar>
					</el-col>
					<el-col :span="12">
						<div class="chatPop1">
							<template v-if="currentRow.illnessDesc.type !== 2">
								<p style="line-height: 23px;float: left;">
									<span class="comStyle">患病时长：</span>{{ currentRow.illnessDesc.duration | durationFilter }}<br>
									<span class="comStyle">就诊情况：</span>{{ currentRow.illnessDesc.treat === 1 ? '未去医院就诊过' : '去医院就诊过' }}<br>
									<span class="comStyle">病情描述：</span>{{ currentRow.illnessDesc.desc }}
								</p>
							</template>
							<template v-else>
								<template v-if="currentRow.illnessDesc.prescribeId">
									<P style="line-height: 23px;float: left;">
										历史处方<br>
										<span class="comStyle">诊断结果：</span>{{ currentRow.illnessDesc.prescribe.result }}<br>
										<span class="comStyle">医生嘱托：</span>{{ currentRow.illnessDesc.prescribe.entrust }}
									</P>
								</template>
								<template v-else>
									<p>
										<span class="comStyle">所患疾病：</span>{{ currentRow.illnessDesc.illnessName }}<br><span class="comStyle">肝功能：</span>{{ currentRow.illnessDesc.liver | myFilter }}<br>
										<span class="comStyle">肾功能：</span>{{ currentRow.illnessDesc.kidney | myFilter }}<br><span class="comStyle">过敏史：</span>{{ currentRow.illnessDesc.allergy | myFilter }}<br>
										<span class="comStyle">生育状态及计划</span>：{{ currentRow.illnessDesc.birth | birthFilter }}</p>
								</template>
							</template>
						</div>
					</el-col>
				</el-row>
				<el-row v-if="imgArray.length > 0">
					<el-col :span="2">
						<el-avatar :src="patientSquareUrl" style="width: 35px;height: 35px;"></el-avatar>
					</el-col>
					<el-col :span="12">
						<div class="chatPop1">
							<p style="line-height: 23px;float: left;" v-for="img in imgArray"><img
								:src="baseUrl+'/common/download/resource?name='+img" alt=""
								height="150" width="200"/></p>
						</div>
					</el-col>
				</el-row>
				<el-row v-if="currentRow.illnessDesc.prescribeImg != null">
					<el-col :span="2">
						<el-avatar :src="patientSquareUrl" style="width: 35px;height: 35px;"></el-avatar>
					</el-col>
					<el-col :span="12">
						<div class="chatPop1">
							<p style="line-height: 23px;float: left;"
							   v-for="img in currentRow.illnessDesc.prescribeImg.split(',')"><img
								:src="baseUrl+'/common/download/resource?name='+img" alt=""
								height="150" width="200"/>
							</p>
						</div>
					</el-col>
				</el-row>
				<el-row v-if="currentRow.illnessDesc.prescribeImg != null">
					<el-col :span="2">
						<el-avatar :src="patientSquareUrl" style="width: 35px;height: 35px;"></el-avatar>
					</el-col>
					<el-col :span="12">
						<div class="chatPop1 chatPosition">
							<p style="width: 300px;">
								<span style="font-weight: bold;">已选药品及用药情况</span><br>
								<el-row v-for="(follow, index) in currentRow.illnessDesc.followDrugs" :key="index" style="margin-top: 10px;">
								 	<el-col :span="6">
										<img style="width: 45px;height: 45px;margin-top: 10px" :src="follow.drug.drugImg != null ? baseUrl + follow.drug.drugImg : defaultDrugUrl" alt="">
									</el-col>
									<el-col :span="18" style="margin-bottom: 5px;">
										<p style="font-weight: bold;margin: 5px 10px 5px 0;font-size: 12px">{{follow.drug.name}} x {{follow.number}}</p>
										<p style="margin: 0 0 5px 0">规格：{{follow.drug.spec}}/{{follow.drug.retailUnit|retailUnitFilter}}</p>
										<p style="margin: 0 0 5px 0">厂家：{{follow.drug.manufacturer}}</p>
										<p class="price">￥{{follow.drug.retailPrice}}</p>
									</el-col>

									<el-col>
										<span class="subTitle">是否正在使用该药：</span>{{follow.isUse | useFilter}};
										<span class="subTitle">用药频率：</span>{{follow.frequency | frequencyFilter}};
										<span class="subTitle">单次用量：</span>{{follow.dosage | dosageFilter}};
										<span class="subTitle">用药方法：</span>{{follow.usage | usageFilter}};
										<span class="subTitle">用药天数：</span>{{follow.days}}天;
										<span class="subTitle">补充说明</span>{{follow.supplement?follow.supplement:'无'}};
									</el-col>
								</el-row>
							</p>
						</div>
					</el-col>
				</el-row>
			</div>
			<div style="margin-left: 30px;margin-top: 15px;" v-for="(item,index) in messageList" :key="index">
				<p class="withdraw" v-if="item.type==='SYS'">{{ item.message }}</p>
				<el-row v-if="item.sender != userid">
					<el-col :span="2" v-if="item.type!=='SYS'">
						<el-avatar :src="patientSquareUrl" style="width: 35px;height: 35px;"></el-avatar>
					</el-col>
					<el-col :span="12">
						<div class="chatPop1">
							<p style="line-height: 23px;float: left;" v-if="item.type==='TXT'">{{ item.message }}</p>
							<p style="line-height: 23px;float: left;" v-if="item.type==='IMG'">
                				<img :src="item.message" alt="" height="150" width="200" v-if="item.message.indexOf('http') > -1"/>
                				<img :src="baseUrl + '/common/download/resource?name='+item.message" alt="" height="150" width="200" v-else/>
              				</p>
						</div>
					</el-col>
				</el-row>
				<el-row v-if="item.sender == userid">
					<el-col :span="21">
						<div class="chatPop2">
							<p style="line-height: 23px;" v-if="item.type==='TXT'">{{ item.message }}</p>
							<p style="line-height: 23px;" v-if="item.type==='IMG'">
                				<img :src="item.message" alt="" height="150" width="200" v-if="item.message.indexOf('http') > -1"/>
                				<img :src="baseUrl + '/common/download/resource?name='+item.message" alt="" height="150" width="200" v-else/>
              				</p>
							<el-card class="box-card prescription" v-if="item.type==='PRE'&&item.prescribe">
								<div slot="header" class="clearfix">
									<span>电子处方</span>
									<span style="float: right;"
										  :class="statusClass[item.prescribe.status]">{{
											item.prescribe.status | statusFilter
										}}</span>
								</div>
								<div class="pre_drug">
									<span class="pre_textLeft">疾病诊断:</span>
									<span class="pre_textRight">{{ item.prescribe.result }}</span>
								</div>
								<div class="pre_drug">
									<span class="suc_textLeft">建议用药:</span>
									<span class="suc_textRight"><template
										v-for="(drug,index) in item.prescribe.preDrugs">{{
											index == item.prescribe.preDrugs.length - 1 && drug.drug.name || (drug.drug.name + ',')
										}}</template></span>
								</div>
								<div class="pre_textCenter" v-if="item.prescribe.status===0">
									<el-button class="pre_btn" @click="rollback(item)">撤回
									</el-button>
								</div>
							</el-card>
						</div>
					</el-col>
					<el-col :span="2" v-if="item.type!=='SYS'">
						<el-avatar :src="doctorSquareUrl" style="width: 35px;height: 35px;"></el-avatar>
					</el-col>
				</el-row>
			</div>
		</div>

		<div class="wxchatBorderRightBottom">
			<div class="camera">
				<el-row :gutter="20">
					<el-col :span="2">
						<div class="grid-content bg-purple">
<!--							<img @click="clickFile" src="../../../static/camera.png" alt="">-->
                            <el-button size="mini" @click="clickFile" type="primary" icon="el-icon-picture-outline" circle></el-button>
							<input type="file" v-show="false" ref="imgDom" @change="pictureChange"/>
						</div>
					</el-col>
					<el-col :span="2">
						<div class="grid-content bg-purple">
<!--							<img @click="videoCall" src="../../../static/shipin.png" alt="">-->
                            <el-button size="mini" :disabled="confrId" @click="videoCall" type="success" icon="el-icon-video-camera" circle></el-button>
						</div>
					</el-col>
                    <el-col :span="2">
                        <div class="grid-content bg-purple">
							<el-popconfirm confirmButtonText='完诊' :cancelButtonText='cancelButton' icon="el-icon-info"
								iconColor="#E6A23C" title="您确认要完诊吗？" style="margin-left: 10px;" @onConfirm="onConfirm" @onCancel="onCancel">
                            	<el-button slot="reference" @click="finish" size="mini" :disabled="!pushedStream" type="danger" icon="el-icon-phone" circle></el-button>
							</el-popconfirm>
                        </div>
                    </el-col>
				</el-row>
			</div>
			<div>
				<el-input type="textarea" autofocus :rows="3" v-model="text"></el-input>
			</div>
			<div class="sendButton">
				<el-button type="primary" size="mini" @click="sendMessage('TXT', text)">发送</el-button>
			</div>
		</div>
	</div>
</template>

<script>
import {mapGetters, mapActions, mapMutations} from "vuex";
import {GetMessage, AddMessage} from '@/api/message';
import {getImToken} from '@/utils/auth'
import WebIM from "../../utils/WebIM";
import Prescribe from "@/views/chat/components/prescribe"
import {GetPreList, EditPrescribe, GetPrescribe} from "@/api/prescribe";

export default {
	props: {
		orderId: {},
		receiver: {},
		currentRow: {},
		tableLength: {}
	},
	data() {
		return {
			roster: [],
			friend: [],
			text: undefined,
			friendId: undefined,
			currentMsg: [],
			flag: false,
			doctorSquareUrl: require('../../assets/image/doctor.png'),
			patientSquareUrl: require('../../assets/image/patient.png'),
			defaultDrugUrl: require('../../assets/image/default_img.png'),
			statusClass: {
				0: 'text-warn',
				1: 'text-success',
				2: 'text-info',
				3: 'text-primary'
			},
			imgArray: [],
			stream: {},
			cancelButton: '完诊并接诊下一位',
			baseUrl: this.$baseUrl
		};
	},
	components: {
		Prescribe
	},
	mounted() {
		this.getMessage();
		if (this.currentRow.illnessDesc.illnessImg) {
			this.imgArray = this.currentRow.illnessDesc.illnessImg.split(',');
		}
	},
	computed: {
		...mapGetters([
			'userid',
      		'name',
			'friends',
			'messageList',
			'unreadMsg',
      		'pushedStream',
      		'timer',
			'confrId'
		])
	},
	destroyed() {

	},
	updated() {
		// this.scrollToBottom();   //每次页面渲染完之后滚动条在最底部
	},
	methods: {
		scrollToBottom() {
			this.$nextTick(() => {
				let container = this.$el.querySelector("dialogue_box");
				container.scrollTop = container.scrollHeight;
			})
		},
		...mapActions(['sendTextMsg', 'sendImgMsg']),
    	...mapMutations(['pushMessageList', 'setConfrId', 'setTimer']),
		sendMessage(type, text, preId) {
			if (type === 'TXT' && !this.text) {
				this.msgInfo('消息不能为空，请重新输入');
				return;
			}
			let params = {
				orderId: this.orderId,
				message: text,
				type: type,
				receiver: this.receiver,
				sender: this.userid
			}
			let ext = {
			  	orderId: this.orderId,
				type: type
		  	}
			if(preId) {
			  ext.preId = preId;
			}
			let msg = new WebIM.message('txt', WebIM.conn.getUniqueId());
			msg.set({
				msg: text,                  // 消息内容
				to: this.receiver,                          // 接收消息对象（用户id）
				chatType: 'singleChat',                  // 设置为单聊
				ext: ext,                                  //扩展消息
				success: (id, serverMsgId) => {
					// 对成功的相关定义，sdk会将消息id登记到日志进行备份处理
					console.log('send private text Success');
					AddMessage(params).then(res => {
						if (res.code === 200) {
						  this.pushMessageList(params);
							// this.getMessage();
						}
					})
				},
				fail: function (e) {
					console.error(e)
					// 对失败的相关定义，sdk会将消息id登记到日志进行备份处理
					console.log("Send private text error");
				}
			});
			WebIM.conn.send(msg.body);
			this.text = undefined;
		},
		clickFile() {
			let img = this.$refs.imgDom;
			img && img.click();
		},
		inputRef(node) {
			this.image = node;
		},
		pictureChange(e) {
			let formData = new FormData();
			formData.append("file", this.$refs.imgDom.files[0])
			let file = WebIM.utils.getFileUrl(e.target);
			if (!file.filename) {
				this.$refs.imgDom.value = null;
				return false;
			}

			let params = {
				file: file,
				receiver: this.receiver,
				sender: this.userid,
				orderId: this.orderId,
				formData: formData,
				callback: () => {
					this.$refs.imgDom.value = null;
				}
			}
			this.sendImgMsg(params).then(() => {
				// this.getMessage();
			});
		},
		getMessage() {
			GetMessage({orderId: this.orderId}).then(res => {
				this.$store.commit('setMessageList', res.data)
				for (let i = 0; i < this.messageList.length; i++) {
					if (this.messageList[i].type === 'PRE') {
						this.getPrescribe(this.messageList[i]);
					}
				}
			})
		},
		getPrescribe(item) {
			GetPreList({prescribeId: item.message}).then(res => {
				this.$set(item, 'prescribe', res.data);
			})
		},
		doPrescribe() {
			this.flag = true;
		},
		rollback(item) {
		  let id = item.prescribe.prescribeId;
			this.$confirm('您确定要撤销该处方吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				GetPrescribe(id).then(res => {
					if (res.data.status === 0) {
						EditPrescribe({prescribeId: id, status: 2}).then(response => {
						  item.prescribe.status = 2;
							this.msgSuccess('您的操作已提交成功');
							this.sendMessage('SYS', '【系统提示】：医生撤回了一条处方', id);
							//this.getMessage();
						})
					} else {
						this.msgInfo('该处方已被患者领取');
						this.getMessage();
					}
				});
			}).catch(() => {
				this.msgInfo('操作已取消');
			});
		},
        async videoCall() {
		    try {
		        console.log("vue pushedStream --->", this.pushedStream);
                // 初始化
                WebIM.EMedia.mgr.setIdentity(WebIM.config.appkey + '_' + this.userid, getImToken());
                // 进入会议的参数
                let params = {
                    roomName: WebIM.conn.getUniqueId(), // string 房间名称 必需
                    password: WebIM.config.britecloud, // string 房间密码 必需
                    role: 7,  // number 进入会议的角色 1: 观众  3:主播 必需
                    config: {
                        rec: false, //是否开启录制会议
                        recMerge: false, //是否开启合并录制
                        supportWechatMiniProgram: true //是否允许小程序加入会议
                    }
                }

                const userRoom = await WebIM.EMedia.mgr.joinRoom(params);
                console.log(userRoom)
				this.setConfrId(userRoom.confrId);
                // 发布音频流的配置参数, Object 必需。 video或audio属性 至少存在一个
                // 加入会议之后 调用 emedia.publish 发布流
                // confrId 会议ID joinId 在会议中的唯一ID role 角色 1观众 3主播 7管理员
                // 进入会议, 若该会议不存在，服务器将会自动创建

                let constaints = {
                    audio: true, // 是否发布音频
                    video: true  // 是否发布视频
                }
                let ext = {} // 发布流的扩展信息 Object 非必需。会议其他成员可接收到
                let pushedStream = await WebIM.EMedia.mgr.publish(constaints, ext);
				this.stream = pushedStream;
                // 邀请视频
                this.inviteVideo(userRoom.confrId, pushedStream.id);

                // 发布本地流成功后， 调用 emedia.mgr.streamBindVideo 用于在video标签显示流
                let videoTag = document.querySelector('#localVideo') //需要显示本地流的 video 标签
                WebIM.EMedia.mgr.streamBindVideo(pushedStream, videoTag);
            } catch (e) {
		        console.log(e)
            }
        },
        inviteVideo(confrId, streamId) {
            let msg = new WebIM.message('txt', WebIM.conn.getUniqueId());
            msg.set({
                msg: '【系统提示】：视频通话',
                to: this.receiver,
                chatType: 'singleChat',
                ext: {
                    doctorName: this.name,
                    isVideo: true,
				  	orderId: this.orderId,
				  	doctorId: this.currentRow.doctor.userId,
                    confrId: confrId,
                    streamId: streamId
                },
                success: (id, serverMsgId) => {
                    // 对成功的相关定义，sdk会将消息id登记到日志进行备份处理
                    this.msgSuccess('正在邀请对方，请稍后...');
                    let timer = setTimeout(() => {
                        if(!this.pushedStream) {
                            this.exitConference();
                        }
                    }, 1000 * 30);
					this.setTimer(timer);
                },
                fail: function (e) {
                    // 对失败的相关定义，sdk会将消息id登记到日志进行备份处理
                    console.error(e)
                    console.log("Send private text error");
                }
            });
            WebIM.conn.send(msg.body);
        },
        exitConference() {
            this.$store.commit('setPushedStream', false);
            this.setConfrId(undefined);
		  	WebIM.EMedia.mgr.unpublish(this.stream);
			// WebIM.EMedia.mgr.exitConference();
        },
		finish() {
			if(this.tableLength == 1) {
				this.cancelButton = "";
			}
		},
		onConfirm() {
			this.$emit('onConfirm');
		},
		onCancel() {
			this.$emit('onCancel');
		}
	},
	watch: {
		messageList: function () {
			this.$nextTick(() => {
				let ex = document.getElementById("dialogue_box");
				ex.scrollTop = ex.scrollHeight;
			})
		}
	},
	filters: {
		myFilter: (value) => {
			if (value === 0) {
				return '正常';
			} else if (value === 1) {
				return '异常';
			} else if (value === 2) {
				return '不清楚';
			}
			return value;
		},
		birthFilter: (value) => {
			if (value == 0) {
				return '无';
			} else if (value == 1) {
				return '准备要孩子';
			} else if (value == 2) {
				return '正在怀孕';
			} else if (value == 3) {
				return '正在哺乳';
			}
			return value;
		},
		statusFilter: (text) => {
			if (text === 0) {
				return '待领取';
			} else if (text === 1) {
				return '已领取';
			} else if (text === 2) {
				return '已撤回';
			} else if (text === 3) {
				return '已购买';
			}
		},
		durationFilter: function (value) {
			if (value === 0) {
				return "一周内"
			}
			if (value === 1) {
				return "一月内"
			}
			if (value === 2) {
				return "半年内"
			}
			if (value === 3) {
				return "大于半年"
			}
			return value;
		},
		useFilter: function(value) {
			switch (value) {
				case 0: return '正在使用';
				case 1: return '以前使用';
				case 2: return '未使用过';
			}
		},
		usageFilter: function(value) {
			switch (value) {
				case 0: return '口服';
				case 1: return '外敷';
				case 2: return '雾化';
				case 3: return '灌肠';
				case 4: return '注射';
				case 5: return '灌注';
			}
		},
		frequencyFilter: function(value) {
			switch (value) {
				case 0: return '每日一次';
				case 1: return '每日两次';
				case 2: return '每日三次';
				case 3: return '每日四次';
			}
		},
		dosageFilter: function (value) {
			switch (value) {
				case 0: return '每日一次';
				case 1: return '每日两次';
				case 2: return '每日三次';
				case 3: return '每日四次';
			}
		},
		retailUnitFilter: function (value) {
			switch (value) {
				case 0: return '盒';
				case 1: return '瓶';
				case 2: return '支';
				case 3: return '片';
			}
		}
	}
}
</script>

<style lang="scss" scoped>

.text-info {
	color: #909399;
}

.text-warn {
	color: #E6A23C;
}

.text-success {
	color: #67C23A;
}

p.d2-text-left {
	font-weight: bold;
	font-size: 30upx;
	padding-left: 30px;
}

.d2-text-left span {
	font-size: 40upx;
	color: red;
	font-weight: bold;
}

.friend {
	border-right-style: solid;
	border-width: 1px
}

.notInfo .el-form-item__label {
	font-size: 28upx;
	font-weight: bolder;
	color: #333333;
}

.wait-class {
	font-size: 150px;
	margin-bottom: 20px;
}

.chat {
	width: 100%;
	height: 250px;
	border-style: solid;
	padding-right: 20px;
	padding-left: 20px;
	overflow: scroll;
}

.chat-time {
	font-size: 12px;
}

.receiver {

}

.sender {
	text-align: right;
}

.board {
	margin-top: 20px;
	height: 200px;
}

.send {
	margin-top: 20px;
	float: right;
}

.prescription {
	width: 300px;
	box-sizing: border-box;
	//   padding: 20px;
	box-shadow: 0px 0px 5px 1px rgba(156, 156, 156, 0.1);
	border-radius: 5px;
	text-align: left;
	float: right;
}

.pre_title {
	height: 50px;
	font-size: 32upx;
	font-weight: 700;

	color: #333333;
}

.pre_drug {
	//   height: 50px;
	margin-bottom: 5px;
}

.pre_textLeft {
	// display: inline-block;
	// width: 65px;
	text-align: left;
	font-size: 28upx;
	color: #666666;
	margin-right: 7px;
}

.pre_textRight {
	// display: inline-block;
	// width: 60px;
	text-align: left;
	font-size: 28upx;
	color: #1a90ff;
}

.suc_textLeft {
	text-align: left;
	font-size: 28upx;
	color: #666666;
	margin-right: 7px;
}

.suc_textRight {
	text-align: left;
	font-size: 28upx;
	color: #1a90ff;
}

.pre_textCenter {
	text-align: center;
}

.pre_btn {
	width: 70px;
	height: 25px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0;
	margin: 10px auto;
	line-height: 25px;
	font-size: 12px;
	color: #1a90ff;
	text-align: center;
	border: 1px solid #1a90ff;
	border-radius: 20px;
}

.withdraw {
	width: 400px;
	height: 35px;
	line-height: 35px;
	border-radius: 35px;
	margin: 15px auto 0;
	color: #cdcdce;
	font-size: 12px;
	text-align: center;
}

.app-container {
	padding: 0;
	width: 850px;
	height: 550px;

	.elTab {
		width: 100%;
		height: 100%;
	}

	::v-deep .el-tabs--left .el-tabs__header.is-left {
		width: 260px;
		height: 100%;
		background: #334154;
	}

	::v-deep .el-tabs__item {
		height: 55px;
		box-sizing: border-box;
		padding: 5px 10px;
		background: #334154;
	}

	::v-deep .el-tabs__item.is-active {
		color: #ffffff;
		background: #505d6d;
	}

	::v-deep .el-tabs__active-bar {
		background: none;
	}

	.el-tabs--left .el-tabs__nav-wrap.is-left::after {
		height: 0;
		width: 0;
	}

	.spanLabel span {
		display: block;
	}

	.spanLeft {
		display: inline-block;
		// background-image:url('../../../static/zi.png');
		float: left;
	}

	.spanRight {
		float: right;
		width: 75%;
		height: 55px;
		overflow: hidden;
	}

	.spanRight span {
		text-align: left;
		height: 20px;
		line-height: 20px;
	}

	.spanName {
		font-size: 28upx;
		color: #ffffff;
	}

	.spanContent {
		font-size: 26upx;
		color: #ffffff;
	}

}


.el-dialog__header {
	padding: 20px 20px 10px;

}

.chatPop1 {
	text-align: left;
}

.chatPop1 :hover {
	background-color: #FAFAFA;
}

.chatPop1 > p {
	background-color: #fff;
	padding: 10px;
	display: inline-block;
	border-radius: 10px;
	margin: 0px 0 10px 10px;
	position: relative;
	color: #333;
	max-width: 290px;
	font-size: 28upx;
	text-align: left;
}

.chatPop1 p::after {
	content: '';
	border: 8px solid #ffffff00;
	border-right: 8px solid #fff;
	position: absolute;
	top: 8px;
	left: -16px;
}

.chatPop2 :hover {
	background-color: #95d0ef;
}

.chatPop2 p {
	background-color: #95d0ef;
	padding: 10px;
	display: inline-block;
	border-radius: 10px;
	margin: 0px 15px 10px 10px;
	position: relative;
	border: 1px solid #E3E3E3;
	max-width: 290px;
	float: right;
	color: #333;
	text-align: left;
	font-size: 28upx;
}


.chatPop2 p::after {
	content: '';

	border: 8px solid #ffffff00;

	border-right: 8px solid #95d0ef;

	position: absolute;

	top: 8px;
	right: -16px;
	transform: rotateY(180deg)
}

.custom {
	border: 0px solid blue;
	height: 670px;
	width: 795px;
}

.wxchatBorder {
	width: 795px;
	height: 670px;
	border: 1px solid red;
	margin-left: -20px;
	margin-top: -59.5px;
}

.wxchatBorderLeft {
	width: 270px;
	height: 550px;
	box-sizing: border-box;
	background-color: #344154;
	display: inline-block;
	float: left;
}

.waitingArea {
	padding: 15px 20px;
	background: #212a39;
	color: #ffffff;
	text-align: left;
}

.listUserName {
	width: 200px;
	text-align: left;
}

.wxchatPeople {
	color: #ffffff;
	font-size: 28upx;
}

.wxchatNews {
	color: #ffffff;
	padding-top: 5px;
	font-size: 12px;
}

.wxchatRow {
	padding-top: 20px;
}

.wxchatName {
	color: #000000;
	font-size: 36upx;
	float: left;
	padding-left: 20px;
}

.wxchatMore {
	color: #999;
	font-size: 40upx;
	float: right;
	margin-right: -15px;
	padding-top: 25px;
}

.wxchatBorderRight {
	max-width: 245px;
	height: 670px;
	display: inline-block;
	float: right;
	margin-right: -22px;
	margin-top: -60px;
}

.wxchatBorderRightTop {
	width: 580px;
	height: 60px;
	background-color: #f5f5f5;
	border-bottom: 1px solid #e7e7e7;
	display: block;
	float: right;
}

.wxchatBorderRightMid {
	width: 580px;
	height: 335px;
	background-color: #f5f5f5;
	display: block;
	float: right;
	overflow: auto;
	padding-bottom: 20px;
}

.wxchatBorderRightBottom {
	width: 580px;
	height: 155px;
	box-sizing: border-box;
	background-color: #fff;
	border: 1px solid #eee;
	display: block;
	float: right;
	padding: 0 5px;
}

.camera {
	height: 40px;
	text-align: left;
	padding: 5px 10px;
}

.wxchatIcon1 {
	display: inline-block;
	padding: 8px 10px 10px 30px;
	width: 40px;
	height: 40px;
	font-size: 40upx;
}

.wxchatIcon2 {
	display: inline-block;
	padding: 8px 10px 10px 20px;
	width: 40px;
	height: 40px;
	font-size: 40upx;
}

.wxchatIcon3 {
	display: inline-block;
	padding: 8px 10px 10px 10px;
	width: 40px;
	height: 40px;
	font-size: 40upx;
}

.wxchatIcon4 {
	display: inline-block;
	padding: 8px 10px 10px 0px;
	width: 40px;
	height: 40px;
	font-size: 40upx;
}

.sendButton {
	float: right;
	margin-top: 5px;
	// margin-right: 28px;
}
//.chatPosition{position: relative;left: 45px;}
.chatPosition .prescription{width: 100%}
.comStyle {
	font-weight: bold;
}
.price{color: red;margin: 0 0 5px 0}
.subTitle{color: #909399;margin-right: 5px;}
</style>
